<template>
  <div class="date-picker-group">
    <a-date-picker
      v-model="startValue"
      :disabled-date="disabledStartDate"
      :show-time="showTime"
      :format="format"
      :placeholder="placeholder[0]"
      style="width: 100%"
      @ok="output"
    />
    <a-date-picker
      v-model="endValue"
      :disabled-date="disabledEndDate"
      :show-time="showTime"
      :format="format"
      :placeholder="placeholder[1]"
      style="width: 100%; margin-top: 10px"
      @ok="output"
    />
  </div>
</template>

<script>
export default {
  name: 'date-picker-group',
  props: {
    value: { type: Array, default: () => [] },
    placeholder: { type: Array, default: () => [] },
    format: { type: String, default: 'YYYY-MM-DD HH:mm:ss' },
    showTime: { type: Boolean, default: true },
  },
  data() {
    return {
      startValue: null,
      endValue: null,
      endOpen: false,
    };
  },
  watch: {
    value: {
      immediate: true,
      deep: true,
      handler() {
        this.startValue = this.value[0] || null;
        this.endValue = this.value[1] || null;
      },
    },
  },
  methods: {
    disabledStartDate(startValue) {
      const endValue = this.endValue;
      if (!startValue || !endValue) {
        return false;
      }
      const startVal = startValue.valueOf();
      const endVal = endValue.valueOf();
      return startVal < endVal - 259200000 || startVal > endVal;
    },
    disabledEndDate(endValue) {
      const startValue = this.startValue;
      if (!endValue || !startValue) {
        return false;
      }
      const startVal = startValue.valueOf();
      const endVal = endValue.valueOf();
      return endVal < startVal || endVal > startVal + 259200000;
    },
    output() {
      if (this.startValue && this.endValue) {
        const data = [this.startValue, this.endValue];
        this.$emit('input', data);
        this.$emit('change', data);
      }
    },
  },
};
</script>

<style lang="less">
.date-picker-group {
  .ant-calendar-picker {
    .ant-calendar-picker-icon {
      color: #d5d5d5;
    }
    &:hover .ant-calendar-picker-icon {
      opacity: 0;
      visibility: hidden;
    }
  }
}
</style>
